<template>
	<view class="placeOrder-page">
		<view class="order-header flex-y-center"  @click="improve">
			<view class="icon-box">
				<uv-icon name="account" color="#666" size="24"></uv-icon>
			</view>
			<view class="user-name flex-grow-1">{{userInfo.nickName}}</view>
			<view class="order-phone" v-if="userInfo.phonenumber">
				<text>{{userInfo.phonenumber}}</text>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
			<view class="" v-else @click="improve">
				请完善手机号
			</view>
			<image class="line" src="/static/images/line.png" mode="widthFix"></image>
		</view>
		<view class="order-item flex-y-center">
			<view class="order-image">
				<!-- <uv-image src="/static/images/good.png" mode="aspectFill" width="100%" height="100%"></uv-image> -->
				<uv-image :src="placeOrder.servicePathIcon" mode="aspectFill" width="100%" height="100%"></uv-image>
			</view>
			<view class="order-cont flex-grow-1">
				<view class="good-name">
					{{placeOrder.serviceName}}
				</view>
				<view class="price">
					￥{{placeOrder.orderPrice}}
				</view>
			</view>
			<view class="number">x1</view>
		</view>
		<view class="order-form">
			<view class="form-remark">
				<view class="order-name flex-grow-0">
					备注
				</view>
				<view class="order-input">
					<uv-textarea :customStyle="{background:'#f1f1f1'}" border="none" v-model="FormData.remark"
						placeholder="请输入内容"></uv-textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					服务技师
				</view>
				<view class="order-input" @click="selectJs">
					<uv-input placeholder="请选择技师" inputAlign="right" disabled="true" :placeholderStyle="{textAlign:'right'}"
						border="none" v-model="FormData.userName"></uv-input>
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					服务方式
				</view>
				<view class="order-input">
					到店服务
				</view>
			</view>
			<view class="form-item" @click="open">
				<view class="order-name flex-grow-0">
					服务时间预约
				</view>
				<view class="order-input">
					<uv-input placeholder="请选择预约时间" inputAlign="right" :placeholderStyle="{textAlign:'right'}"
						border="none" v-model="FormData.serveDate"></uv-input>
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
		</view>
		<view class="" style="height:100rpx;"></view>
		<view class="foot-btn">
			<uv-button color="#5ebcbc" :customStyle="{'border-radius':'10rpx'}" @click="submit">提交预约</uv-button>
		</view>
		<uv-datetime-picker ref="datetimePicker" v-model="datetime" mode="datetime" @confirm="confirm">
		</uv-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					remark: null, //备注
					userName: '', //技师名称
					serveDate: '', //预约时间
					userId: null, //技师id

				},
				radio: '',
				switchVal: false,
				datetime: new Date(),
				placeOrder: {},
				userInfo: {},

			}
		},
		onShow() {
			this.placeOrder = this.$store.state.placeOrder
			this.userInfo = this.$store.state.userInfo
			this.FormData.userName = this.placeOrder.userName //技师姓名
			this.FormData.userId = this.placeOrder.userId //技术id

		},
		methods: {
			// 性别选择
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 性别选择返回结果
			sexSelect(e) {
				this.model1.userInfo.sex = e.name;
				// 对部分表单字段进行校验
				this.$refs.form.validateField('userInfo.sex', err => {
					// 处理错误后的逻辑
				})
			},
			// 选择技师
			selectJs(){
				console.log(111)
				uni.navigateTo({
					url:'/pages/selectJs/selectJs?serviceId='+this.placeOrder.menuIds
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 提交
			async submit() {
				// orderId: "1921561259518009346"orderId: "1921561259518009346"
				// uni.navigateTo({
				// 	url: '/pages/placeOrder/placeOrderState?orderId='+'1921561259518009346'
				// })
				if (!this.FormData.serveDate) {
					this.toast({
						icon: 'error',
						title: '请选择预约时间'
					});
					return false
				}
				if (!this.FormData.userId) {
					this.toast({
						icon: 'error',
						title: '请选择技师'
					});
					return false
				}
				let par = {
					userId: this.placeOrder.userId,
					appUserId: this.userInfo.appUserId,
					menuIds: this.placeOrder.menuIds,
					orderPrice: this.placeOrder.orderPrice,
					serveType: '到店服务',
					serveDate: this.FormData.serveDate,
					remark: this.FormData.remark,
					status:0
				}
				let {
					code,
					data
				} = await this.muajax.orderSumit(par);
				console.log(data.orderId)
				if (code == 200) {
					uni.navigateTo({
						url: '/pages/placeOrder/placeOrderState?orderId='+data.orderId
					})
				}
			},
			reset() {},
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.FormData.serveDate = this.$timef(new Date(e.value), 'Y-m-d H:i:s')
				console.log(this.FormData.appointment)
			},
			
			improve(){
				uni.navigateTo({
					url:'/pages/my/myModifyInfo'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.order-header {
		justify-content: space-between;
		height: 120rpx;
		background: #fff;
		padding: 0px 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		position: relative;

		.line {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;

		}

		.user-name {
			text-align: left;
		}

		.order-phone {
			display: flex;
			align-items: center;
			color: #666;
		}
	}

	.order-item {
		margin: 20rpx 0px;
		padding: 20rpx 30rpx;
		background: #fff;

		.order-image {
			width: 144rpx;
			height: 144rpx;
			margin-right: 35rpx;
		}

		.good-name {
			font-size: 32rpx;
			margin-bottom: 45rpx;
		}

		.number {
			color: #666666;
			font-size: 36rpx;
		}

		.price {
			color: #666666;
		}
	}

	.order-form {
		.form-remark {
			margin-bottom: 20rpx;
			background: #fff;
			padding: 20rpx 30rpx;

			.order-name {
				height: 75rpx;
				line-height: 75rpx;
			}

			.order-input {
				background-color: #f1f1f1;
				border-radius: 10rpx;
			}
		}

		.form-item {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 20rpx 30rpx;
			height: 75rpx;
			border-bottom: 1px solid #f1f1f1;

			.order-input {
				flex-grow: 1;
				flex-shrink: 1;
				text-align: right;
				border: 0px;
			}
		}

	}

	.foot-btn {
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 999;

	}
</style>